import { Meta, StoryObj } from "@storybook/react/*";
import Menu from "./menu";
import MenuItem from "./menuItem";
import SubMenu from "./subMenu";

const meta:Meta<typeof Menu> = {
    title: 'Menu 导航菜单',
    component: Menu,
    // @ts-ignore
    subcomponents:{ MenuItem, SubMenu },
    tags: ['autodocs'],
    parameters: {
        layout: 'centered',
    },
    argTypes: {
        defaultIndex: {
            type:'string',
            description: '默认选中的菜单项的索引值',
        },
        mode: {
            type:'string',
            description: 'Menu的模式',
            control:'radio',
            options: ['horizontal', 'vertical'],
        },
        onSelect: {
            type:'function',
            description: '点击选项时触发的回调函数',
        },
        children:{
            type:'function',
            description: '子组件',
        },
        defaultOpenSubMenus:{
            type:'string',
            description: '默认展开的subMenu',
        },
    },
}

export default meta;

type Story = StoryObj<typeof meta>;

export const DefaultMenu: Story = {
    args: {
        defaultIndex: '0',
        mode: 'horizontal',
        // style: { width: '400px' },   
        onSelect: (index) => {
            console.log(index);
        },
    },
    render: (args) => {
        return (
            <Menu {...args}>
                <MenuItem>tab1</MenuItem>
                <MenuItem>tab2</MenuItem>
                <MenuItem>tab3</MenuItem>
                <SubMenu title="下拉选项">
                    <MenuItem>tab1</MenuItem>
                    <MenuItem>tab2</MenuItem>
                </SubMenu>
            </Menu>
        )
    }
}
DefaultMenu.storyName = '默认的Menu栏'

export const VerticalMenu: Story = {
    args: {
        defaultIndex: '0',
        mode: 'vertical',
        // style: { width: '400px' },   
        onSelect: (index) => {
            console.log(index);
        },
    },
    render: (args) => {
        return (
            <Menu {...args}>
                <MenuItem>tab1</MenuItem>
                <MenuItem>tab2</MenuItem>
                <SubMenu title="下拉选项">
                    <MenuItem>tab1</MenuItem>
                    <MenuItem>tab2</MenuItem>
                </SubMenu>
            </Menu>
        )
    }
}
VerticalMenu.storyName = '纵向的Menu栏'

export const disabledMenu: Story = {
    args: {
        defaultIndex: '0',
        mode: 'horizontal',
        onSelect: (index) => {
            console.log(index);
        },
    },
    render: (args) => {
        return (
            <Menu {...args}>
                <MenuItem>tab1</MenuItem>
                <MenuItem disabled>tab2</MenuItem>
                <SubMenu title="下拉选项">
                    <MenuItem>tab1</MenuItem>
                    <MenuItem>tab2</MenuItem>
                </SubMenu>
            </Menu>
        )
    }
}
disabledMenu.storyName = '有禁用的Menu栏'

export const ShowSubMenu: Story = {
    args: {
        mode: 'vertical',
        defaultOpenSubMenus: ['2','3'],
        onSelect: (index) => {
            console.log(index);
        },
    },
    render: (args) => {
        return (
            <Menu {...args}>
                <MenuItem>tab1</MenuItem>
                <MenuItem disabled>tab2</MenuItem>
                <SubMenu title="下拉选项1">
                    <MenuItem>tab1</MenuItem>
                    <MenuItem>tab2</MenuItem>
                </SubMenu>
                <SubMenu title="下拉选项2">
                    <MenuItem>tab1</MenuItem>
                    <MenuItem>tab2</MenuItem>
                </SubMenu>
                <SubMenu title="下拉选项3">
                    <MenuItem>tab1</MenuItem>
                    <MenuItem>tab2</MenuItem>
                </SubMenu>
            </Menu>
        )
    }
}
ShowSubMenu.storyName = '存在默认展开的的subMenu栏'

